<template>
  <div>
    <div class="edit_form">
      <!-- 表单设计器 -->
      <FcDesigner ref="designer" :mask="true" height="780px">
        <template #handle>
          <el-button round size="small" :icon="Plus" type="primary" @click="handleSave">
            保存
          </el-button>
        </template>
      </FcDesigner>
    </div>

    <!-- 表单保存的弹窗 -->
    <el-dialog v-model="dialogVisible" title="保存表单" width="600">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
        <el-form-item label="表单名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入表单名" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio :label="0"> 启用 </el-radio>
            <el-radio :label="1"> 禁用 </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
  import * as FormApi from '/@/api/bpm/form';
  import { Plus } from '@element-plus/icons-vue';
  import FcDesigner from '@form-create/designer';
  import { encodeConf, encodeFields, setConfAndFields } from '/@/utils/formCreate';
  import { useTagsViewStore } from '/@/store/modules/tagsView';
  import { ref, onMounted, reactive, unref } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { getForm, createForm, updateForm } from '/@/api/backs/workFlow/form';
  import { message } from 'ant-design-vue';
  import checkbox from './checkbox';
  import { useGo } from '/@/hooks/web/usePage';
  const go = useGo();
  const { currentRoute } = useRouter(); // 路由
  const { params } = useRoute(); // 路由信息
  const { delView } = useTagsViewStore(); // 视图操作
  const designer = ref(); // 表单设计器
  const dialogVisible = ref(false); // 弹窗是否展示
  const formLoading = ref(false); // 表单的加载中：提交的按钮禁用
  const formData = ref({
    name: '',
    status: 0,
    remark: '',
  });
  onMounted(() => {
    designer.value.addComponent(checkbox);
    designer.value.appendMenuItem('main', {
      icon: checkbox.icon,
      name: checkbox.name,
      label: checkbox.label,
    });
  });
  const formRules = reactive({
    name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],
    status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
  });
  const formRef = ref(); // 表单 Ref

  /** 处理保存按钮 */
  const handleSave = () => {
    dialogVisible.value = true;
  };

  /** 提交表单 */
  const submitForm = async () => {
    // 校验表单
    if (!formRef.value) return;
    const valid = await formRef.value.validate();
    if (!valid) return;
    // 提交请求
    formLoading.value = true;
    try {
      const data = formData.value as FormApi.FormVO;
      data.conf = encodeConf(designer); // 表单配置
      data.fields = encodeFields(designer); // 表单字段
      if (!data.id) {
        await createForm(data);
      } else {
        await updateForm(data);
      }
      message.success('操作成功！');
      go('/workFlowManage/workFlow/processManagement');

      dialogVisible.value = false;
      close();
    } finally {
      formLoading.value = false;
    }
  };
  /** 关闭按钮 */
  const close = () => {
    delView(unref(currentRoute));
    go('/workFlowManage/workFlow/processManagement');
  };

  /** 初始化 **/
  onMounted(async () => {
    // 场景一：新增表单
    const id = params.id;
    if (id === 'noEdit') {
      return;
    }
    // 场景二：修改表单
    const data = await getForm({ id: id });
    formData.value = data;
    setConfAndFields(designer, data.conf, data.fields);
  });
</script>
<style lang="less">
  .edit_form {
    padding: 0 16px;
    .el-container {
      display: flex;
    }
    ._fc-l {
      width: 266px;
      background: #fff;
    }
    ._fc-m {
      flex: 1;
      display: flex;
      flex-direction: column;
      .el-header {
        background: #fff;
        padding: 16px;
      }
      .el-main {
        flex: 1;
      }
    }
    ._fc-r {
      width: 320px;
      background: #fff;
      .el-container {
        display: flex;
        flex-direction: column;
      }
      .el-main {
        padding: 16px;
      }
    }
  }
</style>
